<!DOCTYPE html>
<html lang="" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }

        html {
            position: absolute;
            margin: 0;
            height: 100vh;
            width: 100vw;
        }

        body {
            position: absolute;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <!--      &lt;!&ndash;  使用v-once命令&ndash;&gt;<br>
          <span v-once>这个将不会改变: {{ message }}</span>

          &lt;!&ndash;  使用v-html命令&ndash;&gt;<br>
          <p>
            <span v-html="phtml"></span>
          </p>

          &lt;!&ndash;  v-bind切换div颜色&ndash;&gt;<br>
          <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
          <div v-bind:class="{'class1': use}">
            v-bind:class 指令
          </div>

          &lt;!&ndash;  Vue花括号运行JS代码&ndash;&gt;
          {{5+5}}<br>
          {{ ok ? 'YES' : 'NO' }}<br>
          {{ message.split('').reverse().join('') }}
          &lt;!&ndash;  这是语句，不是表达式：{{ var a = 1 }}&ndash;&gt;
          &lt;!&ndash; 流控制也不会生效，请使用三元表达式 {{ if (ok) { return message } }}&ndash;&gt;
          <div v-bind:id="'list-' + id">菜鸟教程</div>

          &lt;!&ndash; v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。&ndash;&gt;<br>
          <p v-if="seen">现在你看到我了</p>
          <div v-if="Math.random() >0.5">
              随机数大于0.5
          </div>
          <div v-else>
            随机数小于0.5
          </div>


          <div v-if="type === 'A'">
            A
          </div>
          <div v-else-if="type === 'B'">
            B
          </div>
          <div v-else="type === 'C'">
            C
          </div>
          &lt;!&ndash;v-for使用&ndash;&gt;<br>
          <ol>
            <li v-for="site in sites">
              {{site.text}}
            </li>
          </ol>

          <ul>
            <li v-for="(site,index) in sites">
              {{index}}-{{site.text}}
            </li>
          </ul>

          <p v-for="value in object">
            {{value}}
          </p>

          <ul>
            <li v-for="(value,key) in object">
              {{key}}-{{value}}
            </li>
          </ul>

          &lt;!&ndash;告知v-bind将href属性和url参数进行绑定&ndash;&gt;<br>
          <a v-bind:href="url">菜鸟教程</a>

          &lt;!&ndash;v-model实现数据的双向绑定&ndash;&gt;<br>
          message参数的值为：<input v-model="message">
          seen参数的值为：<input v-model="seen">

          &lt;!&ndash;v-bind 缩写&ndash;&gt;<br>
          <a :href="url">缩写的v-bind跳转：菜鸟教程</a>

          &lt;!&ndash;v-on使用&ndash;&gt;<br>
          <button v-on:click="dosomething">v-on使用</button>
          <button @click="dosomething">v-on缩写使用</button>

          &lt;!&ndash; v-show使用&ndash;&gt;<br>
          <h1 v-show="seen" >{{message}}</h1>

          &lt;!&ndash;v-for和v-if联动&ndash;&gt;<br>
          <select @change="changeVal($event)" v-model="selOption">
            <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
              &lt;!&ndash;索引为1的设为默认选中&ndash;&gt;
              <option v-if="index == 1" selected>
                {{site.text}}
              </option>
              <option v-else :value="site.text">
                {{site.text}}
              </option>
            </template>
          </select>-->
    <!--      <div>您选中了:{{selOption}}</div>-->
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 4,
                message: 'RUNOOB',
                phtml: '<span style="color:red">这里是红色</span>',
                use: false,
                ok: true,
                id: 1,
                seen: false,
                selOption: "Runoob",
                sites: [
                    {id: 1, text: "Google"},
                    {id: 2, text: "Runoob"},
                    {id: 3, text: "Taobao"},
                ],
                url: 'https://www.runoob.com',
                type: 'B',
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        },
        methods: {
            addcount() {
                this.count++
            },
            dosomething() {
                alert('哈哈哈哈')
            },
            changeVal: function (event) {
                this.selOption = event.target.value;
                alert("你选中了" + this.selOption);
            }
        }
    })

    const vm = app.mount('#app')

    // document.write("<br>")
    // document.write("初始count大小为"+vm.count) // => 4
    // document.write("<br>")
    // //调用函数
    // vm.addcount()
    // document.write("调用函数后count大小为"+vm.count) // => 5
</script>
</body>
</html>
